<template>
  <div class="singer-list" ref="singerDiv" @mousewheel="roll">
    <!--
        <Singer v-for="index in 10" :key="index"></Singer>
    -->
    <Singer class="singer"
            v-for="s in $store.state.kugouNet.singerList" :key="s.id"
            :singer="s"
    ></Singer>
  </div>
</template>

<script>
//import Singer from "@/components/Sidebar/SingerList/Singer";
import {useStore} from "vuex";
import {defineAsyncComponent, onMounted, ref} from "vue";
import modal from "@/customize/modal";

export default {
  name: "SingerList",
  components: {
    Singer: defineAsyncComponent(() => import('@/components/Sidebar/SingerList/Singer'))
  },
  description: {
    // 歌手列表
  },
  setup() {
    const store = useStore();
    const singerDiv = ref();

    let timer = true; // 使用定时器实现

    function roll() {
      if (singerDiv.value) {

        let scrollTop = singerDiv.value.scrollTop;
        let clientHeight = singerDiv.value.clientHeight;
        let scrollHeight = singerDiv.value.scrollHeight;

        if (scrollTop + clientHeight >= scrollHeight) {
          if (timer) {
            timer = false;
            modal.onModal();
            store.state.kugouNet.page++;
            store.dispatch("kugouNet/getSingerListNetStore", {
              type: "singerList",
              page: store.state.kugouNet.page,
              num: 15,
              info: false
            });
            setTimeout(function () {
              timer = true;
            }, 1500);
          }
        }
      }
    }

    function getSingerListList() {
      store.commit("kugouNet/SINGER_LIST_EMPTY");
      store.dispatch("kugouNet/getSingerListNetStore", {type: "singerList", num: 15, info: false});
    }

    onMounted(() => {
      getSingerListList();
    })

    return {
      roll,
      singerDiv
    }
  }
}
</script>

<style scoped>
.singerList {

}
</style>
<style scoped lang="less">

@import url("@/assets/less/1.less");

.singer-list {
  width: 950px;
  height: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden; /*x轴禁止滚动*/
  overflow-y: scroll; /*y轴滚动*/

  /* 定义滚动条样式 */

  &::-webkit-scrollbar {
    //display: none;
    width: 10px; //定义滚动条宽度
    height: 10px; //定义滚动条高度
    /*width: 20px;*/
    border-radius: 10px; //定义滚动条圆角
    background-color: rgba(240, 240, 240, 0.1); //定义滚动条颜色
  }

  /*定义滚动条轨道 内阴影+圆角*/

  &::-webkit-scrollbar-track {
    border-radius: 10px;
    /*滚动条里面轨道*/
    background: @bc;
  }

  /*&::-webkit-scrollbar-track {
    display: none;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); //定义轨道阴影
    border-radius: 10px; //定义轨道圆角
    background-color: rgba(4, 56, 114, .5); //定义轨道颜色
  }*/

  /*定义滑块 内阴影+圆角*/

  &::-webkit-scrollbar-thumb {
    border-radius: 10px; //定义滑块圆角
    box-shadow: inset 0 0 0 rgba(240, 240, 240, .5); //定义滑块阴影
    background-color: @fc //定义滑块颜色
  }

  .singer {
    margin-right: 20px;
    margin-bottom: 25px;
  }
}
</style>
